<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title></title>
    <meta name="keywords" content="">
    <link rel="stylesheet" href="../plugin/styles/iview.css" />
    <link rel="stylesheet" href="../css/accountManage.css">
    <link rel="stylesheet" href="../css/common.css">
    <style>
      html, body {
        width: 100%;
        height: 100%;
        background: url(../img/background.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
      }
      .container{
        height: 100%;
        /* background: url(../img/background.png) no-repeat; */
        /* background-size: 100% 100%; */
        margin-top: 50px;
      }
      .ivu-form-item-error-tip{
        left:36px;
      }
      .viewStyle div{
        margin-bottom: 4px;
        font-size: 14px
      }
      .ivu-notice {
        top: 100px !important;
      }
    </style>
  </head>
  <body>
    <div id="roleManage">
      <div class="container">
          <div class="content-head">
            <div>
              <img src="../img/contentHeadBg.png" class="content-head-bg">
            </div>
            <img src="../img/clickRoleManageOn.png" class="click-role">
            <img src="../img/accountManageOff.png" class="click-role-management" @click="goClickAccountManage()">
          </div>
        <div class="add-delete-btn">
          <i-form inline :model="checkin">
            <form-item>
              <div class="add" @click="addCount()">
                <img src="../img/icon_Add_account.png" style="width: 120px;">
              </div>
            </form-item>
            <div style="float:right">
              <form-item>
                <i-input v-model="checkin.searchName" placeholder="查找角色名字" style="width: 200px"></i-input>
              </form-item>
              <form-item>
                <div style="vertical-align: bottom;display: inline-block" @click="queryData">
                  <img src="../img/search-icon.png" width="52px"></img>
                </div> 
              </form-item>
            </div>
          </i-form> 
        </div>
        <!-- table表格 -->
        <div id="tableId" style="margin-top: 30px;padding: 10px">
          <i-table ref="selection" :columns="columns" :data="data" highlight-row style="margin: 0 16px"></i-table>
          <Page :current="currentPage" :total="total" :page-size="pageSize" @on-change="changePage" show-elevator style="margin: 5px 16px 0"></Page>
        </div>
        <!-- 新增弹窗 -->
        <Modal v-model="addModal.display" :loading="addLoading" title="创建角色">
          <i-form :model="addModal" ref="addModalForm" :rules="addModal.rules" >
            <form-item prop="name">
              <i-input v-model="addModal.name" placeholder="角色名" class="creat-lean-input"></i-input>
            </form-item>
            <form-item prop="city">     
              <i-select v-cloak placeholder="所属城市" v-model="addModal.city" @on-change="changeCity()" class="creat-lean-input">
                <i-option v-for="item in getCityList" :key="item.cityCode" :value="item.cityCode">{{item.cityName}}</i-option>
              </i-select>
            </form-item>
            <form-item prop="district">
              <i-select v-cloak placeholder="" class="creat-lean-input" v-model="addModal.district">
                <i-option v-for="item in getDistrictList" :key="item.countyCode" :value="item.countyCode">{{item.countyName}}</i-option>
              </i-select>
            </form-item>
            <form-item class="check-box" prop="single">
              <Checkbox v-model="addModal.single">管理员账号</Checkbox>
            </form-item>
          </i-form>
          <div slot="footer">
            <button :loading="addLoading" @click="addOK">确认</button>
          </div>
        </Modal>
        <!-- 修改弹窗 -->
        <Modal v-model="editModal.display" ref="editModal" :loading="editLoading" title="修改角色" cancel-text=''>
          <i-form :model="editModal" ref="editModalForm" :rules="editModal.rules" >
            <form-item prop="name">
              <i-input v-model="editModal.name" placeholder="角色名" class="creat-lean-input"></i-input>
            </form-item>
            <form-item prop="city">     
              <i-select v-cloak placeholder="所属城市" v-model="editModal.city" @on-change="changeCountry()" class="creat-lean-input">
                <i-option v-for="item in getCityList" :key="item.cityCode" :value="item.cityCode">{{item.cityName}}</i-option>
              </i-select>
            </form-item>
            <form-item prop="district">
              <i-select v-cloak placeholder="" v-model="editModal.district" class="creat-lean-input">
                <i-option v-for="item in getCountryList"  :key="item.countyCode" :value="item.countyCode">{{item.countyName}}</i-option>
              </i-select>
            </form-item>
            <form-item class="check-box" prop="single">
              <Checkbox v-model="editModal.single">管理员账号</Checkbox>
            </form-item>
          </i-form>
          <div slot="footer">
            <button :loading="editLoading" @click="editOK">确认</button>
          </div>
        </Modal>
        <!-- 查看弹窗 -->
        <Modal v-model="viewModal.display" ref="viewModal" title="查看角色" class="viewStyle" v-cloak>
          <div>
            <span>角色ID：</span>
            <span v-text='viewModal.rid'></span>
          </div>
          <div>
            <span>角色名称：</span>
            <span v-text='viewModal.rName'></span>
          </div>
          <div>     
            <span>城市ID：</span>
            <span v-text='viewModal.cityCode'></span>
          </div>
          <div>
            <span>区县ID：</span>
            <span v-text='viewModal.countyCode'></span> 
          </div>
          <div>
            <span>用户个数：</span>
            <span v-text='viewModal.uNum'></span>
          </div>
          <div>
            <span>是否是管理员：</span>
            <span v-text='viewModal.admin===true?"是":"否"'></span>
          </div>
          <div>
            <span>创建时间：</span>
            <span v-text='viewModal.createTime'></span>
          </div>
          <div>
            <span>最近一次更新时间：</span>
            <span v-text='viewModal.updateTime'></span>
          </div>
          <div>     
            <span>权限：</span>
            <span v-for="(item,index) in viewModal.permissions" :key="index" v-text="item.title.split(',')"></span>
          </div>
          <div slot="footer">
            <button>确认</button>
          </div>
        </Modal>
        <!-- 删除弹窗 -->
        <Modal v-model="deleteModal.display" title="" class="delete-modal" v-cloak>
          <p>是否确定删除？</p>
          <div slot="footer">
            <button loading="true" @click="delateModalOK">确认</button>
          </div>
        </Modal>
      </div>
    </div>
    <script src="../js/vue.min.js"></script>
	  <script src="../plugin/iview.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/displaySet/page.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../../../js/mock.js"></script>
    <script src="../../../js/api.js"></script>
    <script>
      new Vue({
        el: '#roleManage',
        mounted(){
          this.roleList()
          this.getCity()
        },
        data() {
          const validateuser = {
            name: (rule, value, callback) => {
              if (!this.addModal.name) {
                return callback(new Error('角色名不能为空'))
              }
              callback()
            },
          }
          const validateuserEdit = {
            name: (rule, value, callback) => {
              if (!this.editModal.name) {
                return callback(new Error('角色名不能为空'))
              }
              callback()
            },
          }
          return{
            currentPage:1,
            total:0,
            pageSize:10,
            getCityList:[],
            getDistrictList:[],
            getCountryList:[],
            addLoading:true,
            editLoading:true,
            columns: [
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },
              {
                title: '角色名称',
                key: 'rName',
                align: 'center'
              },
              {
                title: '用户个数',
                key: 'uNum',
                align: 'center'
              },
              {
                title: '拥有权限',
                key: 'permissions',
                align: 'center',
                // split:true,
                render:(h,params) =>{
                  return h('div',params.row.permissions.map((item)=>{ 
                    return h('span',{},'[' +item.title+' ] ')
                    }) )
                }
              },
              {
                title: '操作',
                align: 'center',
                render: (h, params) => {
                  return h('div', [
                    h('span',{
                      style: {
                        marginRight: '15px',
                        color: '#fff',
                        cursor:'pointer'
                      },
                      on: {
                        click: () => {
                         const deleteParmas = {
                          uuid:params.row.uuid
                         }
                          this.delateData(deleteParmas)
                        }
                      }  
                    },[
                    h('img', {
                      style: {
                        marginRight: '15px'
                      },
                      attrs: {
                        src: "../img/icon-delete.png", 
                        style: 'width: 16px;height: 16px;'						
                        }
                      }),'删除']),
                    h('span',{
                      style: {
                        marginRight: '15px',
                        color: '#fff',
                        cursor:'pointer'
                      },
                      on: {
                        click: () => {
                          const editParmas = {
                            roleName:params.row.rName,
                            uuid:params.row.uuid,
                            cityCode:params.row.cityCode,
                            countyCode:params.row.countyCode
                          }
                          this.editData(editParmas)
                        }
                      }  
                    },[
                    h('img', {
                      style: {
                        marginRight: '15px'
                      },
                      attrs: {
                        src: "../img/icon_edit.png", 
                        style: 'width: 16px;height: 16px;'						
                        }
                      }),'修改']),
                    h('span',{
                      style: {
                        marginRight: '15px',
                        color: '#fff',
                        cursor:'pointer'
                      },
                      on: {
                        click: () => {
                          const viewParmas={
                            admin:params.row.admin,
                            cityCode:params.row.cityCode,
                            countyCode:params.row.countyCode,
                            createTime:params.row.createTime,
                            permissions:params.row.permissions,
                            rName:params.row.rName,
                            rid:params.row.rid,
                            uNum:params.row.uNum,
                            updateTime:params.row.updateTime
                          }
                          this.showData(viewParmas)
                        }
                      }  
                    },[
                    h('img', {
                      style: {
                        marginRight: '15px'
                      },
                      attrs: {
                        src: "../img/icon_View.png", 
                        style: 'width: 16px;height: 16px;'						
                        }
                      }),'查看'])
                  ]);
                }
              }
            ],
            data: [],
            addModal:{
              display:false,
              single:'',
              city:'',
              district:'',
              name:'',
              rules:{
                name:[
                  {required: true,validator: validateuser.name,trigger: 'blur'}
                ],
              }
            },
            editModal:{
              display:false,
              single:'',
              city:'',
              name:'',
              rules:{
                name:[
                  {required: true,validator: validateuserEdit.name,trigger: 'blur'}
                ],
              }
            },
            viewModal:{
              display:false
            },
            // 删除弹窗声明
            deleteModal:{
              display:false
            },
            value:'',
            checkin:{
              searchName:''
            }  
          }      
        },
        methods:{
          //角色列表
          roleList(){
            const urlSearchParams = {
              params:{
                pageNum:this.currentPage,
                pageSize:this.pageSize,
                roleName:this.checkin.searchName
              }
            }
            // const urlSearchParams = {}
            axios.get(GET_getRoleList, urlSearchParams).then(resp => {
              if (resp.data.code === 200) {  
                this.roleListData = resp.data.data
                this.data = this.roleListData.dataList
                this.total = this.roleListData.totalRecord
              }else{
                this.$Notice.error({
                  title: resp.data.msg
                })
              }
            })
          },
          // 删除按钮
          delateData(deleteParmas={}){
            this.deleteModal=Object.assign(this.deleteModal,{
              uuid:deleteParmas.uuid,
              display:true
            })
          },
          delateModalOK(deleteParmas={}){
            let urlSearchParams = new URLSearchParams();
            urlSearchParams.append('uuid',this.deleteModal.uuid);
            axios.post(POST_delRole, urlSearchParams).then(resp => {
              if (resp.data.code === 200) {   
                this.$Notice.success({
                  title: '删除成功'
                })
                this.roleList()
              }else{
                this.$Notice.error({
                  title: resp.data.msg
                })
              }
            })
            this.deleteModal.display = false
          },
          // 跳转到显示设置页面
          goDisplaySet(){
            window.location='displaySet.html'
          },
          goClickAccountManage(){
            window.location='manageAccount.html' 
          },
          // 获取城市数据
          getCity(){
            const urlSearchParams = {
              params:{}
            }
            axios.get(GET_getCity, urlSearchParams).then(resp => {
              if (resp.data.code === 200) {   
                this.getCityList = resp.data.data
              }else{
                this.$Notice.error({
                  title: resp.data.data.msg
                })
              }
            });
          },
          // 改变城市
          changeCity(){
            // 获取区县列表
            let urlSearchParams = {
              params:{
                cityCode:this.addModal.city
              }
            }
            axios.get(GET_getCountyByCityId, urlSearchParams).then(resp => {
              if (resp.data.code === 200) {   
                this.getDistrictList = resp.data.data
              }
            });
          },
          addCount(){
            this.$refs.addModalForm.resetFields()
            this.addModal.display=true
          },
          addOK(){
            this.$refs.addModalForm.validate((valid) => {
            if (!valid) {
              return;
            } else {
               // 增加角色
              let urlSearchParams = new URLSearchParams();
              urlSearchParams.append('cityCode',this.addModal.city);
              urlSearchParams.append('countyCode',this.addModal.district);
              urlSearchParams.append('roleName',this.addModal.name);
              urlSearchParams.append('isAdmin',this.addModal.single===true?'1':'0');
              axios.post(POST_addRole, urlSearchParams).then(resp => {
                if (resp.data.code === 200) {   
                  this.$Notice.success({
                    title: resp.data.msg
                  })
                  this.addLoading=false
                  this.addModal.display=false
                  this.roleList()
                }else{
                  this.$Notice.error({
                    title: resp.data.msg
                  })
                  this.addLoading=false
                }
              })
            }
          })         
          },
          // 修改改变城市
          changeCountry(){
            const urlSearchParams = {
              params : {
                cityCode:this.editModal.city
              }
            }
            axios.get(GET_getCountyByCityId, urlSearchParams).then(resp => {
              if (resp.data.code === 200) {   
                this.getCountryList = resp.data.data
              }
            });
          },
          // 修改按钮
          editData(editParmas={}){
            this.editModal = Object.assign(this.editModal,{
              name:editParmas.roleName,
              city:editParmas.cityCode,
              countyCode:editParmas.countyCode,
              uuid:editParmas.uuid,
              display:true
            })
          },
          editOK(editParmas={}){
            this.$refs.editModalForm.validate((valid) => {
            if (!valid) {
              return;
            } else {
              // 修改角色
              let urlSearchParams = new URLSearchParams();
              urlSearchParams.append('cityCode',this.editModal.city);
              urlSearchParams.append('countyCode',this.editModal.countyCode);
              urlSearchParams.append('roleName',this.editModal.name);
              urlSearchParams.append('uuid',this.editModal.uuid);
              axios.post(POST_updateRole, urlSearchParams).then(resp => {
                if (resp.data.code === 200) {  
                  this.$Notice.success({
                    title: '修改成功'
                  }) 
                  this.editLoading=false
                  this.editModal.display=false
                  this.roleList()
                }else{  
                  this.$Notice.error({
                    title: resp.data.msg
                  })
                  this.editLoading=false
                }
              })
            }
          })
          },
          // 查看按钮
          showData(viewParmas){
            this.roleList()
            this.viewModal = Object.assign(this.viewModal,{
              admin:viewParmas.admin,
              cityCode:viewParmas.cityCode,
              countyCode:viewParmas.countyCode,
              createTime:viewParmas.createTime,
              permissions:viewParmas.permissions,
              rName:viewParmas.rName,
              rid:viewParmas.rid,
              uNum:viewParmas.uNum,
              updateTime:viewParmas.updateTime,
              display:true
            })
          },
          // viewOK(){},
          // 改变页码
          changePage(page){
            this.currentPage = page
            this.roleList()
          },
          // 查询按钮
          queryData(){
            this.roleList()
          }
        }
      })
    </script>
  </body>
</html>